<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
        <title>routes</title>
    </head>

    <body>
        <div th:include="top :: html"></div>
        <div class="contentDiv">
            <table class="table table-hover table-condensed">
                <legend>
                    <strong><a th:text="${serviceName}"/>/routes</strong>
                    <strong th:if="${service}">
                        :<a th:text="${service.url}"/>
                    </strong>
                </legend>
                <thead>
                    <tr>
                        <th>service</th>
                        <th>hosts</th>
                        <th>paths</th>
                        <th>protocols</th>
                        <th>methods</th>
                        <th>preserve_host</th>
                        <th>regex_priority</th>
                        <th>strip_path</th>
                        <th>created_at</th>
                        <th>updated_at</th>
                        <th>operate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="route : ${routes}">
                        <th>
                            <a class="service_id" th:service_id="${route.service.id}" th:href="@{/kong/routes(service=${route.service.id})}"></a>
                        </th>
                        <td th:text="${route.hosts}"></td>
                        <td th:text="${route.paths}"></td>
                        <td th:text="${route.protocols}"></td>
                        <td th:text="${route.methods}"></td>
                        <td th:text="${route.preserve_host}"></td>
                        <td th:text="${route.regex_priority}"></td>
                        <td th:text="${route.strip_path}"></td>
                        <td th:text="${#dates.format(route.created_at * 1000, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${#dates.format(route.updated_at * 1000, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <a class="btn btn-info" th:href="@{/kong/plugins(route_id=${route.id})}">plugins</a>
                            <a class="btn btn-primary" th:href="@{'/kong/routes/'+${route.id}}">update</a>
                            <a class="btn btn-danger btn-delete" href="javascript:void(0)" th:value="${route.id}">delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div th:if="${service}"><a class="btn btn-primary" th:href="@{'/kong/routes/' + ${service.id} + '/add'}" role="button">add route</a></div>
        </div>
        <script type="application/javascript">
            $(function(){
                $('.btn-delete').click(function(){
                    if(!confirm("Make sure to delete this?")){
                        return;
                    }
                    var route_id = $(this).attr('value');
                    var url = "/kong/routes/"+route_id + "/del";
                    $.ajax({
                        url: url,
                        async: false,
                        type: "delete",
                        success: function(){
                            window.location.reload();
                        },
                        error: function(e){
                            alert(e.message);
                            window.location.reload();
                        }
                    })
                });

                var all_services = $.ajax({url:"/kong/all_services", async:false});
                var all_service_json = all_services.responseText;
                var all_service_obj = eval('(' + all_service_json + ')');
                var service_map = {};
                for(var i=0; i<all_service_obj.length;i++){
                    service_map[all_service_obj[i].id] = all_service_obj[i].name;
                }

                $('.service_id').each(function(){
                    var this_service_id = $(this).attr("service_id");
                    if(this_service_id != '' && null != this_service_id){
                        $(this).text(service_map[this_service_id]);
                    }
                })
            })
        </script>
    </body>
</html>